<template>
  <div class="template-content" :style="{background:'rgba(5, 31, 112, 1)'}">
    <div>
      <img class="btnBox" :src="imgSrc" :style="{width:'16px',marginRight: '5px'}"
           title="播放监控视频" @click=""/>
    </div>
    <div>
      <Row :gutter="1">
        <Col span="3">
          <Select id="input-online-select" v-model="online" style="width:100%" placeholder="全部">
            <Option v-for="item in onlineList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Col>
        <Col span="21">
          <Input id="input-device-search" search
                 v-model="srhValue" @on-search="search" placeholder="搜索关键词..." />
        </Col>


      </Row>


    </div>
    <Tree :data="deviceData"
          :style="{width:'200px'}"
          :load-data="loadData"
          :loading="loading"
          :render="renderContent"
          :expand-node="expandNode"
          :expand="expand"
    ></Tree>
  </div>
</template>
<script>
import Device from '@/api/Device';
import Comera from '@/assets/images/comera0.png'
import {apiResult} from "@/libs/util";
export default {
  data(){
    return{
      srhValue:null,
      imgSrc:Comera,
      api:new Device(),
      loading:true,
      expand:false,
      expandNode:true,
      deviceData:[],
      playBtnTitle:'播放监控视频',
      onlineList:[
        {value:0,label:'全部'},{value:1,label:'在线'},{value:-1,label:'离线'}
      ],
      online:0
    }
  },
  methods:{
    search(){
      if (!!this.srhValue || this.online!=0){
        console.log(this.srhValue);
        const that=this;
        const param={keyword:this.srhValue,state:this.online};
        this.api.findDeviceByKeyword(param).then(res=>{
          apiResult(res.data,false,result=>{
            that.deviceData=result.data;
          });
        });
      }else{
        this.top();
      }
    },
    getSrc(){
      return this.imgSrc;
    },
    loadData(item, callback){
      const that = this;
      console.log("item: %o",item);
      let param = {id:item.id};
      this.loading = true;
      //console.log(param);
      this.api.findDeviceForOrgTree(param).then(res=>{
          apiResult(res.data,false,result=>{
            callback(that.resoleData(result.data));
          })
      });
     /*
     setTimeout(() => {
        const data = [
          {
            title: 'children',
            loading: false,
            children: []
          },
          {
            title: 'children-11',
            children: []
            //loading: false,
          }
        ];
        console.log(data);
        callback(data);
      }, 500);
*/
    },
    /** Render 渲染 */
    renderContent(h, { root, node, data }){
      if (data.type == 'org'){
        /** 机构: 大字体
         *
         <span style="display: 'inline-block',width: '100%'">
         <span>
         <h1 style="color:black">这是设备</h1>
         </span>
         </span>
         *
         * */
        return h('span', {
          style: {display: 'inline-block',width: '100%'}
        }, [
          h('span', [
            h('span',{style: {color:"#ddd"}},data.title)
            /*h('h4',{style: {color:"#083FE7CC"}},data.title)*/
          ])
        ]);
      }else if (data.type == 'dev'){
        /** 点击设备 */
        /** 机构: 大字体
         *
         <span style="display: 'inline-block',width: '100%'">
         <span>
         <h1 style="color:black">这是设备</h1>
         </span>
         </span>
         *
         * */
        return h('span', {
          style: {display: 'inline-block',width: '100%'}
        }, [
          h('span', [
            h('span',{style: {color:"#b9ac8a"}},data.title)
            /*h('h4',{style: {color:"#083FE7CC"}},data.title)*/
          ])
        ]);
      }else if (data.type == 'chn' && '1' == data.online){
        console.log(data);
        /** 点击通道且在线 */

        /**
         <img class="btnBox" :src="imgSrc" :title="播放监控视频" @click=""/>
         <span style="display: 'inline-block',width: '100%'">
            <span style="color:green">{{data.title}}</span>
            <span style="display: 'inline-block',float: 'right',marginRight: '2px',width:'32px'">
                <Button type="default" Title="播放" icon="md-play" size="small" shape="circle" style="margin-right: 1px" @click="on-playbtnclick(node,data)"></Button>
            </span>
         </span>
         */
        /** 在线设备 绿色字体 */
        return h('span', {
          style: {display: 'inline-block',width: '150px'},
          on:{
            click: () => {this.$emit('on-node-click', node, data)}
          }
        }, [
          h('img',{
            attrs: { src: this.imgSrc,title: 'playBtnTitle' },
            /*props: {
              src: 'imgSrc',
              title: 'playBtnTitle'
            },*/
            style: {cursor: 'pointer',marginRight: '5px', width:'16px'}
          }),

          h('span', [
            h('span', {style: {color:"green"}},data.title)
          ]),
          h('span', {
            style: {display: 'inline-block',float: 'right',marginRight: '0px',width:'24px'}
          }, [
            /*h('Button', {
              props: Object.assign({}, this.buttonProps, {
                icon: 'md-play',
                title: '视频监控',
                type: 'text',
                size: 'small'
              }),
              style: {marginRight: '8px'},
              on: {
                click: () => {
                  this.$emit('on-playbtnclick', node, data)
                }
              }
            })*/
          ])
        ]);
      }else{
        /** 点击 其它 */
        return h('span', {
          style: {display: 'inline-block',width: '100%'},
          on:{
            click: () => {this.$emit('on-node-click', node, data)}
          }
        }, [
          h('span', [
            h('span', {style: {color:"#737885"}}, data.title)
          ])
        ]);
      }
    },

    /**
     * 数据转换
     * @param originList  原数据
     */
    resoleData(originList){
      let target = [];
      if (!!originList){
        for(let i in originList){
          let data = new Object();
          data.id=originList[i].id;
          data.title=originList[i].title;
          data.type=originList[i].type;
          if (data.type == "chn"){
            data.online = originList[i].online;
          }

          if (!(originList[i].children == null || originList[i].children==undefined)){
            data.loading=false;
            data.children=[];
          }
          if (!(originList[i].arrt == null || originList[i].arrt==undefined)){
            data.arrt=originList[i].arrt;
          }
          target.push(data);
        }

      }
      return target;
    },
    top(){
      const that = this;
      this.api.findDeviceForOrgTree({}).then(res=>{
        let datas = [];
        apiResult(res.data,false,result=>{
          this.deviceData = that.resoleData(result.data);
        })
      });
    }
  },
  mounted() {
    this.top();
  }
}
</script>
<style lang="less" >
@import ".././template";
.btnBox{
  cursor: pointer;
  //width: 57px;
  marginRight: 5px;
  width:16px;

}

#input-device-search .ivu-input {
  /* display: inline-block; */
  /*  width: 100%;
    height: 32px;
    line-height: 1.5;
    padding: 4px 7px;
    font-size: 14px;
    border: 1px solid #dcdee2;
    border-radius: 4px;*/
  color: #ffffff;
  background-color: #051f70ff;
  /*  background-image: none;
    position: relative;
    cursor: text;
    -webkit-transition: border 0.2s ease-in-out, background 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
    transition: border 0.2s ease-in-out, background 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
    transition: border 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    transition: border 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;*/
}

#custom-device-tree .ul .li:hover{
  color: #78aee4;
}

.ivu-select-dropdown {
  background-color: #051f70ff;
}
.ivu-select-item {
  color: rgba(240, 241, 246, 0.87);
}

.ivu-select-selection {
  background-color: #051f70ff;
}

.ivu-select {
  color: #e5e8ef;
}
</style>
